/* LAYOUT */

.container {
  min-width: 320px;
}

.grid-container {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    'sidebar'
    'main';
  /* min-height: 100vh; */
}

@media screen and (min-width: 52rem) {
  .grid-container {
    display: grid;
    grid-template-areas: 'main main';
    /* min-height: 100vh; */
  }

  .grid-container.sidenavi {
    display: grid;
    grid-template-columns: 20rem 1fr;
    grid-template-areas: 'sidebar main';
    /* min-height: 100vh; */
    transition: all 0.1s;
  }

  .sidebar {
    position: inherit;
  }
}

header {
  grid-area: header;
}

.sidebar {
  position: sticky;
  overflow-y: auto;
  top: 0;
  grid-area: sidebar;
}

.sidenavi .content {
  margin: 0;
}

@media screen and (min-width: 52rem) {
  .sidebar {
    position: sticky;
    top: -1px;
    height: 100vh;
    overflow-y: auto;
  }
}

.main {
  grid-area: main;
  /* padding: 0.5rem; */
}

footer {
  grid-area: footer;
}

.container {
  margin: 0;
}

.content {
  background-color: #fff;
  max-width: 64rem;
  margin: 0 auto;
  min-height: 100%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.main-image {
  max-width: 100%;
}

.content-inner {
  padding: 2rem 1rem;
}

@media screen and (min-width: 52rem) {
  .content-inner {
    padding: 2rem;
  }
}